<template>
	<view class="box">
		<u-navbar title="我的寄售订单" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" 
			@leftClick="leftClick"></u-navbar>
		
		<view class="wrap" v-for="item in orderlist" :key="item.id">
			<view class="wrapitem">
				寄售时间：{{item.create_time}}
			</view>
			<view class="wrapitem">
				寄售数量：{{item.market_number}}
			</view>
			<view class="wrapitem">
				兑换比例：1通宝兑换{{item.price}}元宝
			</view>
			<view class="wrapitem">
				已成交量：{{item.sold_quantity_number}}
			</view>
			<view class="btn" v-if="item.status==0 || item.status==1" @click="canels(item.id)">
				撤单
			</view>
		</view>
		<noDatas :xxxList="orderlist" :status="status"></noDatas>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">您确定要撤回该订单吗</text>
		
				<view class="prompt_ntm" @click="submit">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		list,cancel
	} from "../../api/newwallet.js"
	export default {
		data() {
			return {
			
				orderlist: [],
				orderlist2: [],
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				tipShow:false,
				cid:""
			}
		},
		onLoad(options) {
			this.getlist()
		},
		methods: {
			submit(){
				cancel({
					id:this.cid
				}).then(res=>{
					if(res.code==1){
						this.tipShow=false
						this.page=1
						this.getlist()
					}
				})
			},
			canels(id){
				this.cid=id
				this.tipShow=true
			},
			getlist() {
				list({
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.orderlist = this.page == 1 ? list : this.orderlist.concat(list);
						console.log(this.orderlist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/my'
					})
				}
			},



		},
		onReachBottom() {
		
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.getlist2()
				}
			

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #E0DDDA;
		position: relative;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color:#E0DDDA;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 999;

		.tab-list-item {
			position: relative;
			width: 350rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #A68A64;
			}
		}
	}
	
	.wrap{
		width: 690rpx;
		// height: 208rpx;
		padding-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
		.wrapitem{
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			padding-top: 20rpx;
			margin-left: 24rpx;
			>text{
				font-weight: 600;
				font-size: 36rpx;
				color: #A68A64;
			}
		}
		.btn{
			position: absolute;
			width: 172rpx;
			height: 64rpx;
			background: #A68A64;
			border-radius: 536rpx 536rpx 536rpx 536rpx;
			top: 72rpx;
			right: 24rpx;
			text-align: center;
			line-height: 64rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
</style>